<template>
  <div class="photo-albums">
    <img class="photo-albums-face" :src="face()" alt="" @click="openPreview" />
    <div class="photo-albums-desc">
      <slot>共{{ total }}张照片</slot>
    </div>
    <image-preview :image-list="imageSrc" ref="preview1" />
  </div>
</template>

<script>
export default {
  name: 'PhotoAlbums',
  props: {
    imageList: {
      type: Array,
      default: () => []
    },
    face: {
      type: Function,
      default: () => {
        return require('@/components/photoAlbums/assets/images/default.jpg')
      }
    }
  },
  computed: {
    total() {
      return this.imageList.length
    }
  },
  data() {
    return {
      imageSrc: [
        'http://pic1.win4000.com/wallpaper/5/552f48d47cf10.jpg',
        'http://daly.itzjj.cn/uploads/userfiles/12/images/pageimg/20200702/12-200F2141R49.png'
      ]
    }
  },
  methods: {
    openPreview() {
      this.$refs.preview1.openPreview()
    }
  }
}
</script>
